<template>
  <div class="analysis-common">
    <div class="analysis-common-title">
      <div class="title">
        <img src="./img/title-left-img.svg" alt="" />
        <span class="title-text">{{ titleText }}</span>
      </div>
      <mars-button class="close-btn" type="primary" @click="goAnalysisOtherView('analysis')">
        <mars-icon class="close-icon" icon="close"></mars-icon>
      </mars-button>
    </div>

    <p class="analysis-content_tip">{{ info }}</p>

    <slot name="container"></slot>
  </div>
</template>
<script setup lang="ts">
defineProps({
  titleText: String,
  info: String
})

const emit = defineEmits(["goAnalysisOtherViewFn"])
function goAnalysisOtherView(str) {
  emit("goAnalysisOtherViewFn", str)
}
</script>
<style lang="less" scoped>
.analysis-common-title {
  width: 100%;
  height: 28px;
  color: #fff;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(51, 133, 255, 0.4) 0%, rgba(51, 133, 255, 0) 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    display: inline-block;
    width: 91%;
    height: 1px;
    position: absolute;
    top: 46px;
    background-color: rgba(51, 133, 255, 0.4);
  }
  .title {
    display: flex;
    align-items: center;
    margin-left: 10px;
    .title-text {
      margin-left: 5px;
    }
  }
  .close-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #548fe7;
    .close-icon {
      position: absolute;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%);
    }
  }
}
.analysis-content_tip {
  color: #cad1d1;
  font-size: 12px;
  padding-top: 8px;
  margin-bottom: 15px;
}
</style>
